%section
  %a.scroll-target{name: 'typography__variables'}
  %h3.color-black Typography variables & mixins

  .panel.panel--padded
    %h4 Fonts
    %p
      There is one font defined for Tenon. There is a second variable defined
      (with the same font), but it is not used anywhere. Each header can be
      defined independantly as well.
    %code
      %p
        %span.color-primary Source:
        app/assets/stylesheets/tenon/variables/font-family.scss

      %p
        %span.color-primary Put your changes here:
        app/assets/stylesheets/client/variables/font-family.scss

    %h4 Variables
    %p
      Line height and font size are defined for each available size. These can
      also be used with the font mixin (see below).
    %code
      %p
        %span.color-primary Source:
        app/assets/stylesheets/tenon/variables/font-size.scss
      %p
        %span.color-primary Put your changes here:
        app/assets/stylesheets/client/variables/font-size.scss

    %h4 Font size mixins
    %code.expandable
      = expandable_toggle
      %p
        %span.color-primary Source:
        app/assets/stylesheets/tenon/mixins/font-size.scss
      %br
      %p.color-primary Sample usage:
      %p @include font($body-size, $body-line-height);
      %p @include font($h3-size, $h3-line-height);
      %p @include font-size($h1-size);
      %p @include font-size($smallest-size);
